<template>
    <div>
        <!-- 首页顶部模块实现固定定位 -->
        <div id="top">
            <div class="navTop">
                <van-icon name="chat-o" /> <span>订阅</span> <span>推荐</span> <span>直播</span>
                <van-icon name="chat-o" />
            </div>
            <van-search v-model="search" shape="round" background="#fff" placeholder="请输入搜索关键词" />
        </div>

        <!-- 首页通知滚动 -->
        <van-notice-bar left-icon="volume-o" text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准，多写点增加长度，多写点增加长度，多写点增加长度，多写点增加长度" />

        <!-- 首页分类模块，点击展示分类商品 -->
        <van-grid :column-num="4" :gutter="10">
            <van-grid-item v-for="value in 8" :key="value" icon="chat-o" text="文字" />
        </van-grid>

        <!-- 主体部分，包括轮播，倒计时，商品等 -->
        <div id="main">
            <div class="left">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" height="200">
                    <van-swipe-item v-for="item in list"><img :src="item.url" alt=""></van-swipe-item>
                </van-swipe>
                <div class="product"></div>
                <div class="product"></div>
                <div class="product"></div>
            </div>
            <div class="right">
                <div class="countdown">
                    <van-count-down :time="time">
                        <template #default="timeData">
                            <span class="block">{{ timeData.hours }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.minutes }}</span>
                            <span class="colon">:</span>
                            <span class="block">{{ timeData.seconds }}</span>
                        </template>
                    </van-count-down>
                </div>
                <div class="product"></div>
                <div class="product"></div>
            </div>
        </div>
    </div>
</template>
<script>
//导入请求轮播图的axios方法
import { requestBanner } from '@/api/request'
export default {
    data() {
        return {
            search: '',//搜索框数据双向绑定
            time: 30 * 60 * 60 * 1000,//倒计时
            timeData: {
                hours: 5,
                minutes: 0,
                seconds: 0
            },
            list: []//存放轮播图的数组
        }
    },
    activated() {
    },
    watch: {
    },
    async created() {
        let req = await requestBanner()
        let data = req.data
        let { resultCode, resultInfo } = data
        if (resultCode == 1) {
            this.list = resultInfo.list
        }
    },
    mounted() {
    },
    methods: {
    }


}
</script>
<style lang="scss" scoped>
/* 顶部导航+搜索框 */
#top {
    padding-top: 10px;
    position: sticky;
    top: 0px;
    left: 0;
    z-index: 999;
    width: 100%;
    background: #fff;
    overflow: hidden;
    .navTop {
        display: flex;
        justify-content: space-between;
        padding: 0 4%;
        line-height: 33px;
        // margin-top: 50px;
        .van-icon {
            font-size: 30px;
        }
    }

    //搜索框样式
    .van-search {
        width: 100%;
        height: 60px;
    }
}

//主体部分样式，分为两列
#main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    overflow: auto;

    //左列包括轮播
    .left {
        width: 45%;

        //商品
        .product {
            width: 100%;
            height: 200px;
            border: 1px solid #000;
            margin: 8px 0;
        }

        //以下为轮播图样式
        .van-swipe {
            overflow: hidden;
            width: 100%;
        }

        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            line-height: 150px;
            text-align: center;
            background-color: #39a9ed;
        }

        .van-swipe-item img {
            width: 100%;
            height: 200px;
        }
    }

    //右列包括倒计时
    .right {
        width: 45%;

        //商品
        .product {
            width: 100%;
            height: 200px;
            border: 1px solid #000;
            margin: 8px 0;
        }

        //倒计时样式
        .countdown {
            width: 100%;
            height: 100px;
            border: 1px solid #000;

            .colon {
                display: inline-block;
                margin: 20px auto;
                color: #ee0a24;
            }

            .block {
                display: inline-block;
                width: 44px;
                color: #fff;
                font-size: 20px;
                text-align: center;
                background-color: #ee0a24;
            }
        }
    }
}
</style>
